<!DOCTYPE html>
<!--
BlendMol 1.3: Advanced Molecular Visualization in Blender. Copyright (C)
2019 Jacob D. Durrant

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation, either version 3 of the License, or (at your option) any later
version.

This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more
details.

You should have received a copy of the GNU General Public License along with
this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <title>Light/Shadow Baking</title>
        <style>
            html,body{
                overflow:hidden;
                width:100%;
                height:100%;
                margin:0;
                padding:0
            }

            #renderCanvas{
                width:100%;
                height:100%;
                touch-action:none
            }
        </style>
    </head>
    <body>
        <!-- Create a canvas where the 3D scene will be drawn. -->
        <canvas id="renderCanvas"></canvas>

        <!-- Load the babylon library. -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.max.js"></script>

        <!-- Load the jQuery library -->
        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

        <script>
            // Check if BABYLON is supported.
            if (BABYLON.Engine.isSupported()) {
                // Initialize BabylonJS variables
                var canvas = jQuery("#renderCanvas").get(0);
                var engine = new BABYLON.Engine(canvas, true);

                // Wait until the DOM is ready.
                jQuery(document).ready(() => {

                    // Load the babylon file
                    BABYLON.SceneLoader.Load(
                        "", "scene.babylon",
                        engine,
                        function (scene) {

                            // Wait for textures and shaders to be ready
                            scene.executeWhenReady(() => {

                                window.scene = scene;

                                // Create a camera and attach it to the canvas
                                var camera = new BABYLON.ArcRotateCamera(
                                    "ArcRotateCamera", -0.79, 1.57, 10.0,
                                    new BABYLON.Vector3(0.0, 0.0, 0.0),
                                    scene);
                                camera.wheelPrecision = 50;
                                scene.activeCamera = camera;
                                scene.activeCamera.attachControl(canvas);

                                // Start the render loop. The goal is to
                                // achieve 60 fps.
                                engine.runRenderLoop(() => {
                                    // Adjust the visibility of the surface
                                    // mesh based on distance to pivot point.
                                    let surf = scene.getMeshByID("5G38_surf_A");
                                    let radius = scene.activeCamera.radius;
                                    if (radius > 6.0) {
                                        // At large distances, the surface is
                                        // fully visible.
                                        surf.visibility = 1.0;
                                    } else if (radius > 5.5) {
                                        // At intermediate distances it's
                                        // fading to fully transparent.
                                        surf.visibility = 2.0 * (radius - 5.5);
                                    } else {
                                        // At close distances, it is fully
                                        // transparent.
                                        surf.visibility = 0.0;
                                    }

                                    // Make sure the user can't zoom in too
                                    // much.
                                    if (radius < 3.0) {
                                        scene.activeCamera.radius = 3.0;
                                    }

                                    // Render the scene.
                                    scene.render();
                                });

                                // Set the resize event handler.
                                window.addEventListener('resize', () => {
                                    engine.resize();
                                });
                            });
                        }
                    );
                });
            }
        </script>
    </body>
</html>
